<template>
	<view class="activity-page">
		<!-- 中奖弹框 -->
		<u-popup v-model="showPrizePopup" mode="center" :mask-close-able="false" border-radius="10">
			<view class="prize-popup">
				<view class="popup-title">恭喜您中奖了！</view>
				<view class="prize-amount">
					<text class="plus">+</text>
					<text class="number">{{getMoney}}</text>
					<text class="unit">金豆</text>
				</view>
				<view class="prize-image">
					<image src="/static/images/activity/tankuang_01.png" mode="widthFix"></image>
				</view>
				<view class="popup-btn" @click="closePrizePopup">
					<text>知道了</text>
				</view>
			</view>
		</u-popup>

		<!-- 主视觉区域 -->
		<view style="text-align: center;">
			<image src="/static/images/activity/act_head_img.png" alt="" width="100%" mode="widthFix"></image>
		</view>


		<!-- 活动规则卡片 -->
		<view class="content-wrapper">


			<view class="active_item_box">
				<view class="act_card_title">
					<image src='/static/images/index/c_1.png'></image>
					<text>活动规则</text>
				</view>
				<view class="active_rule_box">
					<text class="rule1">{{showInfo.activity.title}}<text
							style="color: indianred;">({{drawStateText}})</text></text>
					<text class="rule2">{{showInfo.activity.regularText}}</text>
					<text class="rule3">活动时间：{{showInfo.activity.startTime}} 至 {{showInfo.activity.endTime}}</text>
					<text class="rule4">抽奖时间：{{showInfo.activity.drawTime}}</text>
				</view>
			</view>


			<view class="active_item_box" style="height: 130rpx;">
				<view class="act_card_title">
					<image src='/static/images/index/c_1.png'></image>
					<text>当前完成进度</text>
				</view>


				<view class="active_pro_box">
					<view class="pro_box">
						<view :style="{ width: finishNumPercent+ '%' }"></view>
					</view>
					<view class="pro_text">{{finishNumPercent}}%</view>
				</view>
			</view>



			<view class="active_item_box" style="height: 260rpx;">
				<view class="act_card_title">
					<image src='/static/images/index/c_1.png'></image>
					<text>活动奖品</text>
				</view>

				<view class="active_prize_box">
					<view class="p_item">
						<view class="p_bg_box">
							<image src='/static/images/index/h_2.png'></image>
							<view class="num">2000</view>
							<view class="label">金豆奖励</view>
						</view>
						<view class="label_type">特等奖</view>
					</view>

					<view class="p_item">
						<view class="p_bg_box">
							<image src='/static/images/index/h_2.png'></image>
							<view class="num">200</view>
							<view class="label">金豆奖励</view>
						</view>
						<view class="label_type">幸运奖</view>
					</view>


				</view>
			</view>



			<view class="active_item_box" style="height: auto;">
				<view class="act_card_title">
					<image src='/static/images/index/c_1.png'></image>
					<text>本期中奖名单</text>
				</view>
				<view class="prize_people_box">
					<view class="td_box_item">
						<text>用户姓名</text>
						<text>金豆</text>
					</view>

					<view class="td_box_item" v-for="(item, index) in showInfo.billList" :key="index">
						<text>{{ item.userName }}</text>
						<text>{{ item.money }}</text>
					</view>

				</view>
			</view>



			<!-- 奖品展示卡片 -->
			<!-- <view class="card prize-card">
				<view class="card-header">
					<view class="dot"></view>
					<text>活动奖品</text>
				</view>
				<view class="prize-list">
					<view class="prize-item">
						<view class="prize-content">
							<text class="prize-amount">2000</text>
							<text class="prize-type">金豆奖励</text>
							<text class="prize-level">特等奖</text>
						</view>
					</view>
					<view class="prize-item">
						<view class="prize-content">
							<text class="prize-amount">200</text>
							<text class="prize-type">金豆奖励</text>
							<text class="prize-level">幸运奖</text>
						</view>
					</view>
				</view>
			</view> -->
			<!-- <view class="card rule-card">
				<view class="card-header">
					<view class="dot"></view>
					<text>活动规则</text>
				</view>
				<view class="rule-content">
					<text class="rule-text">{{showInfo.activity.title}}<text style="color: indianred;">({{drawStateText}})</text></text>
					<text class="rule-text-2">{{showInfo.activity.regularText}}</text>
					<view class="time-info">
						<text>活动时间：{{showInfo.activity.startTime}} 至 {{showInfo.activity.endTime}}</text>
						<text style="color: indianred;">抽奖时间：{{showInfo.activity.drawTime}}</text>
					</view>
				</view>
			</view> -->

			<!-- 进度条卡片 -->
			<!-- <view class="card progress-card">
				<view class="card-header">
					<view class="dot"></view>
					<text v-if="showInfo.activity.schedule === 1">未开始</text>
					<text v-if="showInfo.activity.schedule === 2">抽奖进行中</text>
					<text v-if="showInfo.activity.schedule === 3">待开奖</text>
					<text v-if="showInfo.activity.schedule === 4" style="color: red;">
						已开奖结束<text v-if="showInfo.finishNum < 100">(本期抽奖未达标)</text><text v-if="showInfo.finishNum = 100">(本期抽奖已达标)</text>
					</text>
				</view>
				{{finishNumPercent}}
				<view class="progress-bar">
					<view class="progress-inner" :style="{ width: finishNumPercent+ '%' }">
						<text class="progress-text">{{finishNumPercent}}%</text>
					</view>
				</view>
			</view> -->



			<!-- 中奖名单卡片 -->
			<!-- <view class="card winner-card">
				<view class="card-header">
					<view class="dot"></view>
					<text>本期中奖名单</text>
				</view>
				<view class="winner-list">
					<view class="winner-header">
						<text>用户姓名</text>
						<text>获得奖励</text>
					</view>
					<view class="winner-item" v-for="(item, index) in showInfo.billList" :key="index">
						<text>{{ item.userName }}</text>
						<text class="prize-text">{{ item.money }}</text>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPrizePopup: false, // 控制弹框显示
				activityDraw: {},
				showInfo: {},
				drawStateText: '',
				getMoney: 0,
				finishNumPercent: 0,
				winnerList: [{
						name: '张三',
						phone: '173****8888',
						prize: '特等奖'
					},
					{
						name: '张三',
						phone: '173****8888',
						prize: '特等奖'
					},
					{
						name: '张三',
						phone: '173****8888',
						prize: '一等奖'
					},
					{
						name: '张三',
						phone: '173****8888',
						prize: '一等奖'
					},
					{
						name: '张三',
						phone: '173****8888',
						prize: '一等奖'
					}
				]
			}
		},
		onShow() {
			this.getUserInfo();
			this.init();
		},
		methods: {
			getUserInfo() {
				let userId = uni.getStorageSync('userId')
				if (!userId) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			init() {
				this.$Request.getT('/app/activityDraw/selectOne').then(res => {
					this.activityDraw = res.data
					if (res.data != null) {
						this.getInfo(res.data.id)
					}

				})
			},
			getInfo(id) {
				this.$Request.getT('/app/activityDraw/selectUserCurrent/' + id).then(res => {
					this.showInfo = res.data
					if (res.data != null && res.data.meBill != null && res.data.meBill.isRead == 0) {
						this.getMoney = res.data.meBill.money
						this.openPrizePopup();
					}
					this.finishNumPercent = res.data.finishNum
					if (res.data != null && res.data.activity != null) {
						if (res.data.activity.schedule === 1) {
							this.drawStateText = '未开始'
						}
						if (res.data.activity.schedule === 2) {
							this.drawStateText = '进行中'
						}
						if (res.data.activity.schedule === 3) {
							this.drawStateText = '待开奖'
						}
						if (res.data.activity.schedule === 4) {
							this.drawStateText = '已开奖'
						}
					}
				})
			},
			// 打开中奖弹框
			openPrizePopup() {
				this.showPrizePopup = true;
			},
			// 关闭中奖弹框
			closePrizePopup() {
				this.$Request.getT('/app/activityDraw/selectViewDraw').then(res => {
					if (res.code == 0) {
						this.showPrizePopup = false;
					}
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.active_item_box {
		width: 690rpx;
		background: #FDF2E8;
		border-radius: 20rpx;
		// min-height: 285rpx;
		position: relative;
		margin-bottom: 64rpx;

		.act_card_title {
			position: absolute;
			left: 197rpx;
			height: 66rpx;
			top: -33rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 296rpx;

			image {
				width: 296rpx;
				height: 66rpx;
				position: absolute;
				left: 0;
				top: 0;
			}

			text {
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				position: relative;
				z-index: 2;
			}
		}



		.prize_people_box {
			padding: 70rpx;

			.td_box_item {
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				display: flex;
				padding-bottom: 30rpx;

				&:last-child {
					padding-bottom: 0;
				}

				text {
					&:nth-child(1) {
						width: 50%;
						text-align: center;
					}

					&:nth-child(2) {
						width: 50%;
						text-align: center;
					}

					&:nth-child(3) {
						width: 50%;
						text-align: center;
					}
				}

				&:nth-child(1) {
					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #701000;
					}
				}
			}
		}

		.active_prize_box {
			display: flex;
			padding-top: 63rpx;
			justify-content: space-around;

			.p_item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.label_type {
					font-weight: 400;
					font-size: 24rpx;
					color: #701000;
					padding-top: 16rpx;
				}

				.p_bg_box {
					width: 132rpx;
					height: 116rpx;
					position: relative;

					image {
						width: 132rpx;
						height: 116rpx;
					}

					.num {
						position: absolute;
						width: 132rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #FF0C2E;
						text-align: center;
						left: 0;
						top: 30rpx;
					}

					.label {
						font-weight: bold;
						font-size: 17rpx;
						color: #FFFFFF;
						width: 132rpx;
						position: absolute;
						left: 0;
						bottom: 6rpx;
						text-align: center;
					}
				}
			}
		}

		.active_pro_box {
			display: flex;
			align-items: center;
			padding: 70rpx 30rpx 0 30rpx;

			.pro_box {
				flex: 1;
				height: 16rpx;
				background: #EAE9E9;
				border-radius: 8rpx;

				view {
					height: 16rpx;
					background: linear-gradient(90deg, #FFCD00, #FF3521);
					border-radius: 7rpx;
				}
			}

			.pro_text {
				font-weight: 400;
				font-size: 24rpx;
				color: #FF3521;
				padding-left: 18rpx;
			}
		}

		.active_rule_box {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 50rpx;
			padding-bottom: 50rpx;
			.rule1 {
				font-weight: bold;
				font-size: 30rpx;
				color: #701000;
				padding-bottom: 6rpx;
			}

			.rule2 {
				font-weight: bold;
				font-size: 30rpx;
				color: #701000;
				width: 600rpx;
			}

			.rule3 {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				padding-top: 6rpx;
			}

			.rule4 {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				padding-top: 6rpx;
			}
		}
	}

	.activity-page {
		min-height: 100vh;
		background: #ff614a;
		padding-bottom: 40rpx;
	}

	.main-visual {
		position: relative;
		height: 300rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx;

		.title-text {
			font-size: 48rpx;
			color: #FFFFFF;
			font-weight: bold;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
			margin-bottom: 20rpx;
		}

		.character {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.content-wrapper {
		padding: 0 30rpx;
	}

	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.card-header {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.dot {
				width: 12rpx;
				height: 12rpx;
				background: #FF6B6B;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}
	}

	.rule-content {
		.rule-text {
			display: block;
			font-size: 36rpx;
			color: #333;
			line-height: 1.6;
			text-align: center;
		}

		.rule-text-2 {
			display: block;
			font-size: 34rpx;
			color: #333;
			line-height: 1.6;
			text-align: center;
		}

		.time-info {
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #999;
			text-align: center;

			text {
				display: block;
				line-height: 1.6;
			}
		}
	}

	.progress-bar {
		height: 30rpx;
		background: #F5F5F5;
		border-radius: 15rpx;
		overflow: hidden;

		.progress-inner {
			height: 100%;
			background: linear-gradient(90deg, #FF6B6B 0%, #FFA8A8 100%);
			border-radius: 15rpx;
			position: relative;

			.progress-text {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				color: #FFFFFF;
				font-size: 24rpx;
			}
		}
	}

	.prize-list {
		display: flex;
		justify-content: space-around;

		.prize-item {
			position: relative;
			width: 45%;
			background: #FFF6F6;
			border-radius: 12rpx;
			padding: 20rpx;

			.prize-content {
				text-align: center;

				.prize-amount {
					font-size: 48rpx;
					color: #FF6B6B;
					font-weight: bold;
					display: block;
				}

				.prize-type {
					font-size: 24rpx;
					color: #666;
					display: block;
					margin: 10rpx 0;
				}

				.prize-level {
					font-size: 28rpx;
					color: #FF6B6B;
					display: block;
				}
			}
		}
	}

	.winner-list {
		.winner-header {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			background: #FFF6F6;
			padding: 20rpx 0;
			text-align: center;
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}

		.winner-item {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			padding: 20rpx 0;
			text-align: center;
			font-size: 26rpx;
			color: #666;
			border-bottom: 1rpx solid #EEEEEE;

			.prize-text {
				color: #FF6B6B;
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}

	/* 中奖弹框样式 */
	.prize-popup {
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		text-align: center;

		.popup-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.prize-amount {
			margin: 20rpx 0;

			.plus {
				font-size: 32rpx;
				color: #FF6B6B;
				font-weight: bold;
			}

			.number {
				font-size: 48rpx;
				color: #FF6B6B;
				font-weight: bold;
				margin: 0 4rpx;
			}

			.unit {
				font-size: 28rpx;
				color: #FF6B6B;
			}
		}

		.prize-image {
			margin: 30rpx 0;

			image {
				width: 320rpx;
				height: 225rpx;
			}
		}

		.popup-btn {
			margin-top: 40rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(90deg, #FF6B6B 0%, #FF8F8F 100%);
			border-radius: 44rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 500;
			cursor: pointer;

			&:active {
				opacity: 0.9;
			}
		}
	}
</style>